<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/color.css"/>
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
<form th:action="@{/logout}" method="post">
    <input type="submit" value="注销"/>
</form>
<form th:action="@{/lianxi}" method="post">
    <input type="submit" value="练习"/>
</form>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
       data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#toolbar',
				url: 'dict',
				method: 'get',
				onClickRow: onClickRow
				,rownumbers:true
                ,idField:'id'
                ,pagination:true ">
    <thead>
    <tr>
        <th field="dictTypeCd" width="50" editor="{type:'validatebox',options:{required:true}}">code</th>
        <th field="dictTypeName" width="50" editor="{type:'validatebox',options:{required:true}}">name</th>
        <th data-options="field:'enableFlg',width:60,align:'center',editor:{type:'checkbox',options:{on:true,off:false}}">有效</th>
        <th field="dispOrderNo" width="50" editor="{type:'validatebox',options:{required:true,on:'true',off:'false'}}">排序</th>
        <th field="remark" width="50" editor="{type:'validatebox',options:{required:true}}">remark</th>
        <th field="updatedDate" width="50" >更新时间</th>
        <th field="createdDate" width="50" >创建时间</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:append()">New</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
//            var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
//            var productname = $(ed.target).combobox('getText');
//            $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
//            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{enableFlg:'true',dictTypeCd:'abc'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }
    function getChanges(){
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }
</script>
</body>
</html>